<template>
    <div class="code-generator-example">
        <h2>编号生成工具使用示例</h2>
        
        <el-card class="example-card">
            <template #header>
                <span>仓库编号生成示例</span>
            </template>
            
            <el-form :model="storageForm" label-width="120px">
                <el-form-item label="仓库编号">
                    <el-input v-model="storageForm.code" readonly placeholder="自动生成">
                        <template #append>
                            <el-button @click="generateStorageCode" :loading="generating" type="primary">
                                <el-icon><Refresh /></el-icon>
                                重新生成
                            </el-button>
                        </template>
                    </el-input>
                </el-form-item>
                
                <el-form-item label="仓库名称">
                    <el-input v-model="storageForm.name" placeholder="请输入仓库名称" />
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="example-card">
            <template #header>
                <span>其他编号生成示例</span>
            </template>
            
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="入库单号">
                        <el-input v-model="otherCodes.inbound" readonly />
                        <el-button @click="generateInboundCode" size="small" style="margin-top: 8px">
                            生成入库单号
                        </el-button>
                    </el-form-item>
                </el-col>
                
                <el-col :span="8">
                    <el-form-item label="盘点单号">
                        <el-input v-model="otherCodes.inventory" readonly />
                        <el-button @click="generateInventoryCode" size="small" style="margin-top: 8px">
                            生成盘点单号
                        </el-button>
                    </el-form-item>
                </el-col>
                
                <el-col :span="8">
                    <el-form-item label="出库单号">
                        <el-input v-model="otherCodes.delivery" readonly />
                        <el-button @click="generateDeliveryCode" size="small" style="margin-top: 8px">
                            生成出库单号
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="流水号">
                        <el-input v-model="otherCodes.flowingWater" readonly />
                        <el-button @click="generateFlowingWaterNumber" size="small" style="margin-top: 8px">
                            生成流水号
                        </el-button>
                    </el-form-item>
                </el-col>
                
                <el-col :span="12">
                    <el-form-item label="自定义编号">
                        <el-input v-model="otherCodes.custom" readonly />
                        <el-button @click="generateCustomCode" size="small" style="margin-top: 8px">
                            生成自定义编号
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-card>

        <el-card class="example-card">
            <template #header>
                <span>编号验证示例</span>
            </template>
            
            <el-form :model="validationForm" label-width="120px">
                <el-form-item label="仓库编号验证">
                    <el-input v-model="validationForm.storageCode" placeholder="请输入仓库编号" />
                    <el-tag :type="validateStorageCode(validationForm.storageCode) ? 'success' : 'danger'" style="margin-top: 8px">
                        {{ validateStorageCode(validationForm.storageCode) ? '格式正确' : '格式错误' }}
                    </el-tag>
                </el-form-item>
                
                <el-form-item label="入库单号验证">
                    <el-input v-model="validationForm.inboundCode" placeholder="请输入入库单号" />
                    <el-tag :type="validateInboundCode(validationForm.inboundCode) ? 'success' : 'danger'" style="margin-top: 8px">
                        {{ validateInboundCode(validationForm.inboundCode) ? '格式正确' : '格式错误' }}
                    </el-tag>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import {
    generateStorageCode,
    generateInboundCode,
    generateInventoryCode,
    generateDeliveryCode,
    generateFlowingWaterNumber,
    generateCustomCode,
    fetchExistingStorageCodes,
    validateStorageCode,
    validateInboundCode
} from './codeGenerator'

// 仓库表单
const storageForm = reactive({
    code: '',
    name: ''
})

// 其他编号
const otherCodes = reactive({
    inbound: '',
    inventory: '',
    delivery: '',
    flowingWater: '',
    custom: ''
})

// 验证表单
const validationForm = reactive({
    storageCode: '',
    inboundCode: ''
})

// 状态
const generating = ref(false)
const existingCodes = ref<string[]>([])

// 生成仓库编号
const generateStorageCodeHandler = async () => {
    generating.value = true
    try {
        const newCode = await generateStorageCode(existingCodes.value)
        storageForm.code = newCode
        ElMessage.success('仓库编号生成成功')
    } catch (error) {
        ElMessage.error('生成仓库编号失败')
    } finally {
        generating.value = false
    }
}

// 生成入库单号
const generateInboundCodeHandler = () => {
    otherCodes.inbound = generateInboundCode()
    ElMessage.success('入库单号生成成功')
}

// 生成盘点单号
const generateInventoryCodeHandler = () => {
    otherCodes.inventory = generateInventoryCode()
    ElMessage.success('盘点单号生成成功')
}

// 生成出库单号
const generateDeliveryCodeHandler = () => {
    otherCodes.delivery = generateDeliveryCode()
    ElMessage.success('出库单号生成成功')
}

// 生成流水号
const generateFlowingWaterNumberHandler = () => {
    otherCodes.flowingWater = generateFlowingWaterNumber()
    ElMessage.success('流水号生成成功')
}

// 生成自定义编号
const generateCustomCodeHandler = async () => {
    try {
        otherCodes.custom = await generateCustomCode('TEST', 4, [])
        ElMessage.success('自定义编号生成成功')
    } catch (error) {
        ElMessage.error('生成自定义编号失败')
    }
}

// 初始化
onMounted(async () => {
    // 获取已存在的仓库编号
    existingCodes.value = await fetchExistingStorageCodes()
    
    // 生成初始仓库编号
    await generateStorageCodeHandler()
})
</script>

<style scoped>
.code-generator-example {
    padding: 20px;
}

.example-card {
    margin-bottom: 20px;
}

.example-card :deep(.el-card__header) {
    background-color: #f5f7fa;
    font-weight: 600;
}

.example-card :deep(.el-form-item) {
    margin-bottom: 16px;
}
</style>
